<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 风控管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
            padding: 60px;
            max-width: 450px;
            width: 90%;
            text-align: center;
        }
        
        .logo {
            font-size: 3em;
            color: #dc2626;
            margin-bottom: 20px;
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 2.2em;
        }
        
        .subtitle {
            color: #666;
            margin-bottom: 40px;
            font-size: 1.1em;
        }
        
        .oauth-login-btn {
            width: 100%;
            padding: 15px 20px;
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
            text-decoration: none;
            display: inline-block;
        }
        
        .oauth-login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4);
            text-decoration: none;
            color: white;
        }
        
        .oauth-login-btn:visited {
            color: white;
        }
        
        .info-section {
            background: #fef2f2;
            padding: 25px;
            border-radius: 10px;
            margin-top: 30px;
            text-align: left;
        }
        
        .info-section h3 {
            color: #dc2626;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .feature-list {
            list-style: none;
            padding: 0;
        }
        
        .feature-list li {
            padding: 8px 0;
            color: #555;
            position: relative;
            padding-left: 25px;
        }
        
        .feature-list li:before {
            content: "⚠";
            position: absolute;
            left: 0;
            color: #dc2626;
            font-weight: bold;
        }
        
        .security-notice {
            background: #fef3c7;
            border: 1px solid #f59e0b;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            color: #92400e;
            font-size: 0.9em;
        }
        
        .footer {
            margin-top: 30px;
            color: #999;
            font-size: 0.9em;
        }
        
        .system-status {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: #10b981;
            font-size: 0.9em;
        }
        
        .status-dot {
            width: 8px;
            height: 8px;
            background: #10b981;
            border-radius: 50%;
            margin-right: 8px;
            animation: pulse 2s infinite;
        }
        
        .risk-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: #dc2626;
            font-size: 0.9em;
        }
        
        .risk-dot {
            width: 8px;
            height: 8px;
            background: #dc2626;
            border-radius: 50%;
            margin-right: 8px;
            animation: blink 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="logo">🛡️</div>
        <h1>风控管理系统</h1>
        <p class="subtitle">统一身份认证登录</p>
        
        <!-- 未登录状态标记 -->
        <div style="background-color: #fee2e2; color: #dc2626; padding: 10px; border-radius: 5px; margin-bottom: 20px; font-weight: bold; border: 1px solid #dc2626;">
            <span style="font-size: 16px;">⚠️ 当前状态：未登录</span>
        </div>
        
        <div class="system-status">
            <div class="status-dot"></div>
            <span>系统运行正常</span>
        </div>
        
        <div class="risk-indicator">
            <div class="risk-dot"></div>
            <span>风险监控启用</span>
        </div>
        
        <!-- OAuth2 登录按钮 -->
        <a href="/oauth2/authorization/risk-client" class="oauth-login-btn">
            🔐 统一认证登录
        </a>
        
        <!-- 系统功能介绍 -->
        <div class="info-section">
            <h3>🎯 核心功能</h3>
            <ul class="feature-list">
                <li>实时风险监控</li>
                <li>智能风险评估</li>
                <li>异常行为检测</li>
                <li>风险预警通知</li>
                <li>合规性检查</li>
                <li>风险报告生成</li>
            </ul>
        </div>
        
        <!-- 安全提示 -->
        <div class="security-notice">
            <strong>🔒 安全提示：</strong>
            本系统处理敏感风控数据，采用最高级别的安全认证。
            所有操作将被记录并接受合规性审计。
        </div>
        
        <div class="footer">
            <p>Spring Boot 3 + OAuth2 + JWT</p>
            <p>风险控制管理系统 v1.0</p>
        </div>
    </div>
    
    <script>
        // 检查是否有错误参数
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('error')) {
            const container = document.querySelector('.login-container');
            const errorDiv = document.createElement('div');
            errorDiv.style.cssText = `
                background: #fee2e2;
                color: #dc2626;
                padding: 15px;
                border-radius: 8px;
                margin-bottom: 20px;
                border-left: 4px solid #dc2626;
            `;
            errorDiv.innerHTML = '<strong>登录失败！</strong><br>认证过程中出现错误，请重试。';
            container.insertBefore(errorDiv, container.children[4]);
        }
        
        // 添加登录按钮的点击效果
        document.querySelector('.oauth-login-btn').addEventListener('click', function(e) {
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
        
        // 模拟风险监控数据更新
        let riskLevel = ['低风险', '中风险', '高风险'];
        let currentLevel = 0;
        
        setInterval(() => {
            const indicator = document.querySelector('.risk-indicator span');
            if (indicator) {
                currentLevel = (currentLevel + 1) % riskLevel.length;
                indicator.textContent = `风险等级: ${riskLevel[currentLevel]}`;
            }
        }, 5000);
    </script>
</body>
</html>